<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="@{commons/temp1}::commonHead('湖南省自来水公司营销管理信息系统')">
	<style type="text/css">
		#t_meterCount { text-align:right; width:30px; vertical-align:middle; }
	</style>
	<script type="text/javascript">
      function setMeter(){
          var n = $('#t_meterCount').val();
          if(isNaN(n))return;    //不是数字
          if(n<=0||n>100)return; //不合理
          var rows = $('table.data tbody tr');
          if(rows.length == n)return; //行数相同
          if(rows.length<n){//需增加行数
              for(var i=rows.length;i<n;i++){
                  $('table.data tbody').append('<tr><td>' + (i+1) +
                      '</td><td><input/></td><td><input/></td><td><input/></td><td><input/></td><td></td></tr>');
              }
          }else{//需减少行数
              $('table.data tbody tr:gt('+(n-1)+')').remove();
          }
      }
	</script>
<body>
<div id="wrapper">
	<div id="header" th:replace="@{commons/temp1}::commonHeadMenu">
	</div>
	<div id="masthead" th:replace="@{commons/temp1}::commonMasthead('用户申请')">
	</div>
	<div id="content" class="xgrid">
		<form action="/BeOrder/submitRequest1">

		</form>
		<div class="x12">
			<h2>
				用户申请 - 办理新开户业务
				<a style="float:right" href="javascript:history.back(-1);">返回</a>
			</h2>
			<div class="tab_container">
				<ul class="tabs">
					<li><a href="#tab1">申请表</a></li>
					<li><a href="#tab2">新户详细表</a></li>
				</ul>
				<div class="tab_content_container">
					<div id="tab1" class="tab_content">
						<table width="100%">
							<thead>
								<tr>
									<th width="60"></th>
									<th width="220"></th>
									<th width="60"></th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>用户名称</td>
									<td>
										<input type="text" name="userName"/>
									</td>
									<td>用户类型</td>
									<td><select style="width:158px;" name="userType">
											<option selected="selected" value="1">私户</option>
											<option value="2">公户</option>5
										</select>
									</td>
								</tr>
								<tr>
									<td>联系人</td>
									<td><input type="text" name="linkMan"/></td>
									<td>联系电话</td>
									<td><input /></td>
								</tr>
								<tr>
									<td>用户地址</td>
									<td colspan="3"><input size="68" /></td>
								</tr>
								<tr>
									<td>用水量</td>
									<td><input /></td>
									<td>申请表径</td>
									<td><select style="width:158px;">
											<option>DN10</option>
											<option selected="selected">DN15</option>
											<option>DN20</option>
											<option>DN40</option>
											<option>DN80</option>
											<option>DN100</option>
											<option>DN200</option>
											<option>DN500</option>
											<option>DN1000</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>房屋层次</td>
									<td><input /></td>
									<td>接水用途</td>
									<td><input /></td>
								</tr>
								<tr>
									<td>备注说明</td>
									<td colspan="3"><input size="68" /></td>
								</tr>
							</tbody>
							</table>
					</div>
					<div id="tab2" class="tab_content">
						申请装表表数 <input id="t_meterCount" value="1" />
						<button class="btn btn-small" onClick="setMeter();">确定</button>
						<div id="meters">
							<table class="data display">
							<thead>
								<tr>
									<th width="30">序号</th>
									<th width="160">姓名</th>
									<th width="160">电话</th>
									<th width="160">短信号码</th>
									<th width="160">地址</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td><input/></td>
									<td><input/></td>
									<td><input/></td>
									<td><input/></td>
									<td></td>
								</tr>
							</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- .x12 -->
		<div class="centerButtons">
			<button class="btn">办理</button>
			<button class="btn btn-grey" onClick="history.back(-1);">返回</button>
		</div>
	</div>
	<div id="footer" th:replace="@{commons/temp1}::commonFooter">
	</div>
</div>
</div>
<footer th:replace="@{commons/temp1}::commonFooterJS"></footer>
<script type="text/javascript">
$(document).ready ( function ()
{
	Dashboard.init ();
	//选项卡初始化
	$('.tab_container').tabs ();
});
</script>
</body>
</html>